<template>
  <div class="List" @click="get(item)">
    <div class="Lpic">
      <img :src="'/bimg/'+item.pic" />
    </div>

    <div class="Lcenter">
      <p class="showtop">{{item.title}}</p>
      <p class="showmain">{{item.chapter}}</p>
      <p class="showmain">{{item.category}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "bookshow",
  props: {
    msg: String,
    item: "",
    bookbox:[]
  },
  data() {
    return {
      active: "",
    };
  },
  methods: {
    get(item) {
      localStorage.setItem("bookbox", JSON.stringify(item));
      this.$router.push('/Booklist')
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
.bList,
.List {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.List img {
  height: 3rem;
  width: 80%;
  margin-left: 0.1rem;
}

.Lpic {
  display: flex;
  width: 30%;
  flex-direction: column;
}

.Lcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 60%;
}

.Licon {
  align-self: center;
}
.showtop {
  font-size: 0.4rem;
  font-weight: 600;
}
.showmain {
  color: rgb(94, 79, 79, 0.6);
  font-size: 0.3rem;
  font-weight: 500;
}
</style>
